<script setup lang="ts">
import {ref} from "vue";
import {DevSelectMutex, devUseExtractSelected} from "devecoui-plus";

const options = ref([
  {
    label: '苹果',
    value: '1'
  },
  {
    label: '香蕉',
    value: '2'
  },
  {
    label: '柿子',
    value: '3'
  },
  {
    label: '西瓜',
    value: '4'
  },
  {
    label: '菠萝',
    value: '5'
  }
])

const list = ref([
  {
    value: []
  }
]);
const allSelectValue = devUseExtractSelected(list.value, 'value', true);
/**
 * 删除选项
 * @param index
 */
const deleteItem = (index: number) => {
  list.value.splice(index, 1);
};

/**
 * 添加选项
 */
const addList = () => {
  list.value.push({
    value: []
  });
};
</script>

<template>
  <el-card>
    <div v-for="(item,index) in list" :key="index">
        <p>选项{{ index + 1 }}：{{ item.value }}</p>
        <div class="item-div">
          <dev-select-mutex :multiple="true"
                            :all-select-value="allSelectValue"
                            :options="options"
                            v-model="item.value"/>
          <div class="button-box">
            <el-button :disabled="list.length <=1" @click="deleteItem(index)">删除</el-button>
            <el-button @click="addList" type="primary">添加</el-button>
          </div>
        </div>
      </div>
  </el-card>
</template>

<style scoped lang="scss">
.item-div {
  display: flex;
}

.button-box {
  width: 200px;
  margin-left: 10px;
}
</style>
